<!-- 添加地址 -->
<template>
  <div class="addressDetail-main">
    <Navbar :title="title" />
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-delete
      :address-info='AddressInfo'
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="doAddressSave"
      @delete="onDelete"
      @change-area='areaChoose'
    />
   

  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
import areaList from "@/assets/js/area.js";
import Vue from "vue";
import { AddressEdit, Area, Toast } from "vant";

Vue.use(AddressEdit).use(Area).use(Toast);
import addressApi from "@/api/address/index";
export default {
  name: "addressDetail",
  components: {
    Navbar,
  },
  data() {
    return {
      title: "新增地址",
      areaList,
      id:'',
      AddressInfo:{
        name:'',
        tel:'',
        address:'',
        isDefault:false,
        addressDetail:'',
      },
    };
  },
  created() {
    this.id=this.$route.params.id
    console.log(this.id);
    if(this.id){
      this.getAddressDetail()
    }
  },
  methods: {
    //用了AddressEdit插件的,直接通过传递AddressInfo,就可以得到输入框里的内容
    doAddressSave(AddressInfo) {
      var params = {
        openId: "15845697415",
        userName: AddressInfo.name,
        telNumber: AddressInfo.tel,
        address:AddressInfo.address,
        checked: AddressInfo.isDefault,
        detailadress: AddressInfo.addressDetail,
        addressId: ""
      };
      console.log(params);
      addressApi.addressSave({ 
        ...params 
     }).then((res) => {
        if (res.data) {
          Toast({
              message:'成功提交',
              icon: "success",
          });
          this.$router.go(-1)
        }
      });
        
    },
    getAddressDetail(AddressInfo){
     addressApi.addressDetail({
       id:this.id
     })
     .then(res=>{
       var addresslist=res.data
      
       addresslist.address= addresslist.address.split(' ')
        console.log(addresslist.address);
       this.AddressInfo.name=addresslist.name
       this.AddressInfo.tel=addresslist.mobile
       this.AddressInfo.isDefault=addresslist.is_default==1 ? true:false
       this.AddressInfo.addressDetail=addresslist.address_detail
       this.AddressInfo.address= addresslist.address
       console.log(this.AddressInfo.address);
     })
    },
    // 在当前id的一个表单,删除对应id即可
    onDelete(){
     addressApi.addressDelete({
       id:this.id
     })
     .then(res=>{
       Toast({
         message:'删除成功'
       })
       this.$router.go(-1)
     })

    },
    
    //地区信息
    areaChoose(e){
      var name =e.map(ele=>ele.name)
      var code =e.map(ele=>ele.code)
      console.log(e);
      this.AddressInfo.address=name.join(' ')
      this.AddressInfo.areaCode=code.join(' ')
      console.log(this.AddressInfo.address,this.AddressInfo.areaCode);
    }
  },
};
</script>
<style lang='scss' scoped>
.addressDetail-main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  background-color: #fff;
}
</style>